import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDateRangePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const columns:ProColumns[] = [
    {
      title:'活动名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'XXXXX活动'
    },
    {
      title:'开始日期',
      dataIndex: 'date1',
      hideInSearch:true,
      width:100,
      renderText:()=>'2023-05-01'
    },
    {
      title:'结束日期',
      dataIndex: 'date2',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-05-03'
    },
    {
      title:'承办方',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'XXXX有限公司'
    },
    {
      title:'活动状态',
      dataIndex: 'date31',
      valueType:'select',
      width:100,
      valueEnum:{
        '0':'已计划',
        '1':'进行中',
        '2':'已结束',
        '3':'中止',
      }
    },
    {
      title:'年度预算名称',
      dataIndex: 'date4',
      hideInSearch:true,
      width:100,
      renderText:()=>'2023年度'
    },
    {
      title:'年度预算金额',
      dataIndex: 'date5',
      hideInSearch:true,
      valueType:'money',
      width:100,
      renderText:()=>'1000000'
    },
    {
      title:'活动规模(总人数)',
      dataIndex: 'name2',
      width:130,
      hideInSearch:true,
      renderText:()=>'30'
    },
    {
      title:'创建日期',
      dataIndex: 'createDate',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-05-01'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:100,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
        dataSource={[{},{},{},{},{}]}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormText name="name111" width={'md'} label="活动名称" rules={[{ required: true}]}/>
            <ProFormDateRangePicker name="name" width={'md'} label="活动日期" rules={[{ required: true}]}/>
            <ProFormSelect name="name102" width={'md'} label="活动类型" rules={[{ required: true}]}/>
            <ProFormText name="name101" width={'md'} label="活动目的" rules={[{ required: true}]}/>
            <ProFormText name="name1" width={'md'} label="活动地址" rules={[{ required: true}]}/>
            <ProFormText name="name2" width={'md'}  label="主办方"/>
            <ProFormText name="name3" width={'md'} label="承办方" rules={[{ required: true}]}/>
            <ProFormText name="name21" width={'md'}  label="第三方"/>
            <ProFormDigit name="name4" width={'md'} label="活动规模(总人数)"/>
            <ProFormSelect name="name5" width={'md'} label="产品线" options={[{label:'产品线A',value:'0'},{label:'产品线B',value:'1'}]}/>
          </ProFormGroup>
          <ProFormGroup>
            <ProFormSelect name="name6" width={'md'} label="年度预算名称" options={[{label:'2023年度预算',value:'0'}]} />
            <ProFormSelect name="name7"  rules={[{ required: true}]} width={'md'} label="费用类型" options={[{label:'广告费',value:'0'}
            ,{label:'翻译费',value:'1'},{label:'礼品费',value:'2'},{label:'版权费',value:'3'}]} />
            <ProFormSelect name="name71" mode='multiple'  rules={[{ required: true}]} width={'md'} label="费用类别" options={[{label:'交通费',value:'0'}
            ,{label:'住宿费',value:'1'},{label:'餐费',value:'2'},{label:'展位费',value:'3'},{label:'制作费',value:'4'},{label:'其他费用',value:'5'}]} />

            <ProFormDigit name="name9" width={'md'} label="活动费用" />
            <ProFormSelect name="name10" width={'md'} label="协同人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
          </ProFormGroup>
          <ProFormGroup>
           <ProFormDigit name="name91" width={'md'} label="邀请人数" />
           <ProFormDigit name="name92" width={'md'} label="实际人数" />
           <ProFormSelect name="name51" width={'md'} label="活动状态" options={[{label:'已计划',value:'0'},{label:'进行中',value:'1'},{label:'已结束',value:'2'},{label:'中止',value:'3'}]}/>

          </ProFormGroup>
        
          <div style={{height:20}}></div>
          <ProFormTextArea name="name101" width={'lg'} label="活动说明" rules={[{ required: true}]}/>
          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
    </PageContainer>)
}